<template>
    <div class="app-container review">
        <div class="search">
            <el-input class="inputWidth" v-model="search.authorName" placeholder="作者" clearable></el-input>
            <el-date-picker 
                v-model="timeRange" 
                type="daterange" 
                align="right" 
                unlink-panels 
                range-separator="-" 
                start-placeholder="创建时间起" 
                end-placeholder="创建时间止" 
                value-format="yyyy-MM-dd HH:mm:ss" 
                :picker-options="pickerOptions"
                clearable
            >
            </el-date-picker>
            <el-select v-model="search.auditStatus" placeholder="状态" clearable>
                <el-option
                v-for="item in status"
                :key="item.code"
                :label="item.msg"
                :value="item.code">
                </el-option>
            </el-select>
            <el-button type="primary" @click="searchAdvisory">查询</el-button>
        </div>
        <div class="list">
            <el-table 
                :data="list" 
                v-loading="tableLoading" element-loading-text="数据加载中，请稍后" 
                border fit highlight-current-row 
            >
                <el-table-column align="center" label="资讯标题">
                    <template slot-scope="scope">
                        {{scope.row.title}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="状态">
                    <template slot-scope="scope">
                        {{scope.row.auditStatusDesc}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="作者">
                    <template slot-scope="scope">
                        {{scope.row.authorName}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="创建时间">
                    <template slot-scope="scope">
                        {{scope.row.createTime | dateformat('YYYY-MM-DD HH:mm')}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="更新时间">
                    <template slot-scope="scope">
                        {{scope.row.updateTime | dateformat('YYYY-MM-DD HH:mm')}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button size="small" @click="reviewDetail(scope.row.id)">审核</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div v-show="!tableLoading" class="pagination">
                <el-pagination 
                    @size-change="handleSizeChange" 
                    @current-change="handleCurrentChange" 
                    :current-page.sync="search.pageNo" 
                    :page-sizes="[10,20,30,50]" 
                    :page-size="search.pageSize" 
                    layout="total, sizes, prev, pager, next, jumper" 
                    :total="total"
                >
                </el-pagination>
            </div>
        </div>
        <el-dialog width="70%" :visible.sync="dialogFormVisible" class="popBox">
            <el-form 
                ref="dataForm" 
                :model="review" 
                label-width="100px"
                :rules="rules" 
            >
                <el-row>
                    <div class="sub-navbar">
                        <el-button style="margin-left: 10px;" size="small" @click="checkAdvisory(0)">审核不通过
                        </el-button>
                        <el-button style="margin-left: 10px;" type="success" size="small" @click="checkAdvisory(1)">审核通过
                        </el-button>
                    </div>
                </el-row>
                <div class="boxCont">
                    <el-row>
                        <el-col :span="24">
                            <div class="postInfo-container">
                            <el-row>
                                <el-col :span="6">
                                <el-form-item label-width="90px" label="栏目资讯：">
                                    <el-cascader
                                        change-on-select  placeholder="请选择" expand-trigger="click"
                                        :options="sections"
                                        v-model="review.sectionIds"
                                        class="width"
                                    ></el-cascader>
                                </el-form-item>
                                </el-col>
                                <el-col :span="14">
                                    <el-tooltip  class="item" effect="dark" content="请输入标题" placement="top">
                                        <el-form-item label-width="110px" label="标题：" prop="title">
                                        <el-input style="min-width:380px" placeholder="请输入标题" maxlength="100" v-model="review.title">
                                        </el-input>
                                        </el-form-item>
                                    </el-tooltip>
                                </el-col>
                                <el-col :span="4">
                                    <div style="margin-top:10px;font-size:14px;margin-left:10px">
                                        <span>您还可以输入{{ 100 - review.title.length }}个字</span>
                                    </div>
                                </el-col>
                            </el-row>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label-width="110px" label="设置标签：">
                            <multiselect style="line-height:initial" 
                                v-model="labelIds" 
                                :options="labels" 
                                @search-change="getLabelOptions" 
                                placeholder="搜索标签" 
                                selectLabel="选择" 
                                :multiple="true" 
                                deselectLabel="删除" 
                                track-by="id" 
                                :internalSearch="false" 
                                label="name"
                            >
                                <span slot='noResult'>无搜索结果</span>
                            </multiselect>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <div class="editor-container">
                            <el-tooltip  class="item" effect="dark" content="请输入内容" placement="top">
                                <el-form-item label-width="110px" label="内容：" prop="content">
                                <Tinymce :height=400 ref="editor" v-model="review.content"  :value="review.content"/>
                                </el-form-item>
                            </el-tooltip>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label-width="110px" label="设置权重：">
                                <el-input-number v-model="review.weight" :step="1" :min="0"></el-input-number>
                                <el-input class="input" v-model="review.weight==0? '0' : review.weight" type="number"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label-width="110px" label="设置浏览量：">
                                <el-input-number  v-model="review.view" :step="1" :min="0"></el-input-number>
                                <el-input class="input" v-model="review.view==0? '0' : review.view" type="number"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label-width="110px" label="设置点赞数：">
                                <el-input-number  v-model="review.likeCount" :step="1" :min="0"></el-input-number>
                                <el-input class="input" v-model="review.likeCount==0? '0' : review.likeCount" type="number"></el-input>
                            </el-form-item>
                        </el-col> 
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-upload 
                            style="margin-left:10px" 
                            :headers="headers" 
                            action="/tools/oss/upload" 
                            :on-remove="handleRemove" 
                            :on-success="handleUploadSuccess" 
                            list-type="picture" 
                            :file-list="file" 
                            :limit="1"
                        >
                                <el-button size="small" type="primary">上传封面</el-button>
                            </el-upload>
                        </el-col>
                    </el-row>
                </div>
                
            </el-form>
           
        </el-dialog>
    </div>
</template>

<script>
import { auditStatus, advisoryList, reviewDetail, getSectionCascade, getInfoLabels, checkAdvisory } from '@/api/advisory'
import Multiselect from 'vue-multiselect'; // 使用的一个多选框组件，element-ui的select不能满足所有需求
import 'vue-multiselect/dist/vue-multiselect.min.css'; // 多选框组件css
import Tinymce from '@/components/Tinymce';
import { getToken } from '@/utils/auth' // 验权
export default {
    components: { Tinymce, Multiselect },
    data(){
        return{
            search:{
                pageNo: 1,
                pageSize: 10
            },
            timeRange:null,
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                    }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                    }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            status:[],
            list:[],
            tableLoading: true,
            total: null,
            dialogFormVisible: false,
            review: {
                sectionIds:[],
                labelIds: [],
                title: ""
            },
            labelIds:[],
            sections: [],
            labels: [],
            headers:{},
            file:[],
            rules:{
                title: [{ required: true, message: '标题必填', trigger: 'blur' }],
            }
        }
    },
    created(){
        this.getTimeStaus();
        this.advisoryList();
        this.getSectionCascade();
        this.getLabelOptions('')
    },
    mounted(){
        this.headers = { accessToken: getToken() }
    },
    methods:{
        //获取资讯状态
        getTimeStaus(){
            auditStatus().then(response => {
                const { code, data } = response;
                if (code == 0) {
                    this.status = data;
                }
            })
        },
        // 资讯条件搜素
        searchAdvisory(){
            if(this.timeRange){
                this.search.startTime=new Date(this.timeRange[0]);
                this.search.endTime =new Date(this.timeRange[1]);
            } else {
                delete this.search.startTime;
                delete this.search.endTime;
            }
            this.advisoryList();
        },
        // 资讯列表
        advisoryList(){
            this.tableLoading=true;
            this.list=[];
            advisoryList(this.search).then(response =>{
                const { code, data } = response;
                if (code == 0) {
                    this.list = data.list;
                    this.total = data.total;
                    this.tableLoading=false
                }else{
                    this.tableLoading=false
                }
            }).catch(err => {
                this.tableLoading=false
            });
        },
        // 多少条一页
        handleSizeChange(val) {
            this.search.pageSize = val
            this.advisoryList()
        },
        // 分页
        handleCurrentChange(val) {
            this.search.pageNo = val
            this.advisoryList()
        },
        // 审核资讯详情
        reviewDetail(id){
            reviewDetail({id: id}).then(response =>{
                const { code, data } = response;
                if (code == 0) {
                    this.dialogFormVisible=true;
                    if(data.sectionIds){
                        let sectionIds = data.sectionIds.split(',');
                        sectionIds = sectionIds.map(e=>e=parseInt(e))
                        data.sectionIds=sectionIds;
                    }
                    if(data.cover){
                        this.file = [{ name: data.cover, url: data.cover }]
                    }else{
                        this.file = []
                    }
                    this.labelIds= data.labels;
                    this.review= data;
                }
            })
        },
        //获取热点推荐
        getSectionCascade() {
            getSectionCascade().then(response => {
                const { code, data } = response
                if (code == 0) {
                    this.sections = data;
                }
            })
        },
        //获取标签
        getLabelOptions(title){
            getInfoLabels({labelName:title}).then(response => {
                const { code, data } = response
                if (code == 0) {
                    this.labels = data;
                }
            })
        },
        // 移除封面
        handleRemove(file, fileList) {
            this.review['cover'] = '';
            this.file = [];
        },
        // 上传封面
        handleUploadSuccess(rst){
            let { code, data: { picUrlList } } = rst;
            let { review } = this;
            if (code == 0) {
                review['cover'] = picUrlList[0];
            }
        },
        // 审核
        checkAdvisory(status){
            let message="";
            let type="";
            if(status==0){
                message= "审核不通过";
                type="error";
            }else{
                message= "审核通过";
                type="success";
            }
            let params=JSON.parse(JSON.stringify(this.review));
            params.labelIds=[];
            params.isAuditPass=status;
            if(params.sectionIds.length>1){
                params.sectionId=params.sectionIds[length];
            }else if(params.sectionIds.length==1){
                params.sectionId=params.sectionIds[0]
            }
            for(let i in this.labelIds){
                params.labelIds.push(this.labelIds[i].id)
            }
            delete params.sectionIds;
            if(params.cover==""){
                this.$message({
                    message: "封面图片不能为空",
                    type: "error"
                });
            }else{
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        checkAdvisory(params).then(response =>{
                            const { code, data } = response;
                            if (code == 0) {
                                this.$message({
                                    message: message,
                                    type: type
                                });
                                this.dialogFormVisible= false;
                                this.advisoryList();
                            }
                        })
                    }
                })
            }
        }
    }
}
</script>

<style lang="scss">
    .review{
        .inputWidth{
            width: 200px;
        }
        .list, .pagination{
            padding-top: 20px;
        }
        .width{
            width: 120px;
        }
        .sub-navbar{
            height: 50px;
            line-height: 50px;
            position: relative;
            width: 100.1%;
            text-align: right;
            padding-right: 20px;
            -webkit-transition: 600ms ease position;
            transition: 600ms ease position;
            background: -webkit-gradient(linear, left top, right top, from(#20b6f9), color-stop(0%, #20b6f9), color-stop(100%, #2178f1), to(#2178f1));
            background: linear-gradient(90deg, #20b6f9 0%, #20b6f9 0%, #2178f1 100%, #2178f1 100%);
            top:-30px;
        }
        .el-dialog__body{
            padding: 0px;
        }
        .boxCont{
            padding: 30px 20px;
        }
        .input{
            width: 180px;
            height: 40px;
            position: relative;
            line-height: 40px;
            text-align: center;
            top: -40px;
            .el-input__inner{
                text-align: center
            }
        }
        .el-col-6 .el-form-item{
            height: 40px;
        }
    }
</style>
